<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>任务管理器</title>

    <link type="text/css" href="css/style.css" rel="stylesheet" />
  </head>
  <body>
    <div id="box">
      <div class="head">
        <h2>Todos</h2>
        <p>罗列日常计划，做一个时间管理大师！</p>
        <div class="input">
          <span>内容</span>
          <input
            type="text"
            placeholder="请输入你要做的事"
            v-model="text"
            @keydown.enter="add"
          />
          <span id="add" @click="add">确认</span>
        </div>
      </div>

      <ul class="list">
        <li v-if="!textList.length">暂无数据</li>
        <template v-else>
          <li v-for="(item, index) in textList" :key="index">
            <!-- 前面的序号 -->
            <span class="xh">{{ index +1 }}</span>
            <!-- 列表内容 -->
            <span>{{item}}</span>
            <!-- 删除按钮 -->
            <span class="qc" @click="del(index)"></span>
          </li>
          <li>
            <b> 总数：{{ textList.length }} </b>
            <b id="clear" @click="clear">清除</b>
          </li>
        </template>
      </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
      var top = new Vue({
        el: "#box",
        // 在此处补全代码，实现所需功能
        data: {
          textList: [],
          text: "",
        },
        methods: {
          add() {
            if (!this.text.trim()) return
            this.textList.push(this.text)
            this.text = ""
          },
          del(index) {
            this.textList.splice(index, 1)
          },
          clear() {
            this.textList = []
          },
        },
      })
    </script>
  </body>
</html>
